<template>
  <div class="app-container">
    <el-button type="primary" size="small" plain @click="dialogCreate = true"><i
      class="el-icon-plus"
    /> 新增标签
    </el-button>
    <el-button type="warning" size="small" plain @click="handleDeleteMultiple"><i
      class="el-icon-delete"
    /> 删除标签
    </el-button>

    <el-card style="margin-top: 15px;">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tags"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top: 15px;"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" align="center" width="80" />
        <el-table-column label="标签名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createdAt | sub_date }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleEdit(row)">
              <i class="el-icon-edit" /> 编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">
              <i class="el-icon-delete" /> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--新增模态框-->
    <el-dialog title="新增标签" :visible.sync="dialogCreate" center>
      <el-form ref="ruleForm" :model="ruleForm" style="margin-top: 15px;" :rules="rules">
        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreate = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑模态框-->
    <el-dialog title="编辑标签" :visible.sync="dialogEdit" center>
      <el-form ref="ruleForm" :model="tag" style="margin-top: 15px;" :rules="rules">
        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="tag.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchTagList, createTag, fetchTag, updateTag, deleteTag, deleteMultipleTag } from '@/api/tag'

export default {
  filters: {
    // 日期截取
    sub_date: function(val) {
      return val.substring(0, 10)
    }
  },
  data() {
    return {
      loading: false,
      tags: [],
      dialogCreate: false,
      dialogEdit: false,
      ruleForm: {
        name: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          {
            required: true,
            message: '请填写标签名',
            trigger: 'blur'
          }
        ]
      },
      tag: {},
      multipleSelection: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      fetchTagList().then(response => {
        this.tags = response.data.tags
        this.listLoading = false
      })
    },
    // 新增标签
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return
        createTag(this.ruleForm).then((res) => {
          if (res.code === 20000) {
            // 清空表单值
            this.ruleForm.name = ''
            this.dialogCreate = false
            this.fetchData()
            this.$message({
              message: res.message,
              type: 'success'
            })
          }
        })
      })
    },
    // 查询单条
    handleEdit(row) {
      this.dialogEdit = true
      fetchTag(row.id).then((res) => {
        this.tag = res.data.tag
      })
    },
    // 执行编辑
    updateForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return
        updateTag(this.tag.id, this.tag).then((res) => {
          if (res.code === 20000) {
            this.dialogEdit = false
            this.fetchData()
            this.$message({
              message: res.message,
              type: 'success'
            })
          }
        })
      })
    },
    // 删除标签
    handleDelete(row) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteTag(row.id).then((res) => {
          if (res.code === 20000) {
            this.fetchData()
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'info',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 全选、反选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选删除
    handleDeleteMultiple() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('您至少要选中一条数据~')
      } else {
        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          const checkedId = this.multipleSelection.map((item) => {
            return item.id
          })
          deleteMultipleTag({ checked_id: checkedId }).then((res) => {
            if (res.code === 20000) {
              this.fetchData()
              this.$message({
                type: 'success',
                message: res.message
              })
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
}
</script>
